<template>
	<view class="container">
		<header-view type="all"></header-view>
		<view class="content">
			<view class="nav flex">
				<view class="nav_item" :class="activeNav==1?'active_nav':''" @tap="changeNav(1)">{{$t('股票')}}</view>
				<view class="nav_item" :class="activeNav==2?'active_nav':''" @tap="changeNav(2)">{{$t('自选')}}</view>
			</view>
			<view class="nav_list flex" v-if="activeNav==1">
				<view class="nav_list_item" v-for="(item,index) in tipList" :class="item.gain>0?'up':'down'"
					@tap="openDetail(item)">
					<view class="title flex_between">
						<view class="name el1">{{item.name}}</view>
						<view class="tag">{{item.code}}</view>
					</view>
					<view class="data" :class="item.gain>0?'green':'red'">
						<view class="price">{{item.price}}</view>
						<view class="detail flex_center">
							<view class="inner"></view>
							<text>{{item.gainvalue}}</text><text>{{item.gain}}%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="data_nav flex">
				<view class="nav_item" :class="activeDataNav==1?'active_data_nav':''" @tap="changeDataNav(1)">
					{{$t('涨幅榜')}}
				</view>
				<view class="nav_item" :class="activeDataNav==2?'active_data_nav':''" @tap="changeDataNav(2)">
					{{$t('跌幅榜')}}
				</view>
			</view>
			<view class="data_list flex_between" v-if="list.length!=0">
				<view class="data_item" v-for="(item,index) in list" :class="item.gain>0?'up':'down'"
					@tap="openDetail(item)">
					<view class="title flex_between">
						<view class="name el1">{{item.name}}</view>
						<view class="tag">{{item.code}}</view>
					</view>
					<view class="data" :class="item.gain>0?'green':'red'">
						<view class="price">{{item.price}}</view>
						<view class="detail flex_center">
							<view class="inner"></view>
							<text>{{item.gainvalue}}</text><text>{{item.gain}}%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="no_data" v-else>
				<view class="btn flex_center" @tap="toChoose">
					<uni-icons type="plusempty" size="25" color="#9984dc"></uni-icons>
					<text style="padding-left: 20rpx;">{{$t('选择股票')}}</text>
				</view>
			</view>
		</view>
		<tab-view id="2"></tab-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import tabView from "@/components/tabView/tabView.vue"
	import {
		stockListApi
	} from "@/api/api.js"
	export default {
		components: {
			tabView,
			headerView
		},
		data() {
			return {
				activeNav: 1,
				activeDataNav: 1,
				page: 1,
				list: [],
				tipList: []
			};
		},
		onShow(opt) {
			let type = uni.getStorageSync("type")
			this.activeDataNav == 1
			this.page = 1
			if (type) {
				this.activeNav = type
				uni.removeStorageSync("type")
				this.getMyUpList()
			} else {
				this.activeNav = 1
				this.getList()
				this.getUpList()
			}
		},
		onReachBottom() {
			console.log("滚动到底部")
			if (this.total == this.list.length) {
				uni.$u.toast(this.$t('没有更多了~'))
				return
			}
			this.page++
			if (this.activeNav == 1) {
				this.activeDataNav == 1 ? this.getUpList() : this.getDownList()
			} else {
				this.activeDataNav == 1 ? this.getMyUpList() : this.getMyDownList()
			}
		},
		methods: {
			async changeNav(key) {
				if (this.activeNav == key) {
					return
				}
				this.list = []
				this.page = 1
				this.activeDataNav = 1
				this.activeNav = key
				if (this.activeNav == 1) {
					await this.getUpList()
				} else {
					await this.getMyUpList()
				}
			},
			// 自选涨幅列表
			async getMyUpList() {
				await stockListApi({
					type: 5,
					page: this.page,
					listorder: 3
				}).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.list = res.data.data.data
					} else {
						this.list = [...this.list, ...res.data.data.data]
					}
				})
			},
			// 自选跌幅列表
			async getMyDownList() {
				await stockListApi({
					type: 5,
					page: this.page,
					listorder: 4
				}).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.list = res.data.data.data
					} else {
						this.list = [...this.list, ...res.data.data.data]
					}
				})
			},
			// 推荐列表
			async getList() {
				await stockListApi({
					type: 1
				}).then(res => {
					console.log(res.data.data.data)
					this.tipList = res.data.data.data
				})
			},
			// 涨幅榜
			async getUpList() {
				await stockListApi({
					type: 3,
					page: this.page
				}).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.list = res.data.data.data
					} else {
						this.list = [...this.list, ...res.data.data.data]
					}
				})
			},
			// 跌幅榜
			async getDownList() {
				await stockListApi({
					type: 4,
					page: this.page
				}).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.list = res.data.data.data
					} else {
						this.list = [...this.list, ...res.data.data.data]
					}

				})
			},
			async changeDataNav(key) {
				this.page = 1
				this.list = []
				this.activeDataNav = key
				if (this.activeNav == 1) {
					this.activeDataNav == 1 ? this.getUpList() : this.getDownList()
				} else {
					this.activeDataNav == 1 ? this.getMyUpList() : this.getMyDownList()
				}
			},
			toChoose() {
				this.activeNav = 1
				this.changeDataNav(1)
			},
			openDetail(opt) {
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + opt.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		// height: 100vh;
		/deep/.header {
			position: sticky;
			top: 0;
			z-index: 9;
		}

		.content {
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;

			.nav {
				height: 110rpx;
				align-items: flex-end;
				padding-bottom: 40rpx;
				position: sticky;
				top: calc(var(--status-bar-height) + 180rpx);
				background-color: #0a0b24;
				z-index: 9;

				.nav_item {
					font-size: 14px;
					color: #a4a4af;
					padding: 0 20rpx;
				}

				.active_nav {
					font-size: 20px;
					color: #fff;
				}
			}

			.nav_list {
				width: 100%;

				.nav_list_item {
					flex: 1;
					overflow: hidden;
					flex-shrink: 0;
					margin: 0 8rpx;
					border-radius: 10rpx;
					padding: 8rpx 16rpx;

					.title {
						width: 100%;
						overflow: hidden;
						color: #dbdbde;
						height: 15px;
						line-height: 15px;

						.name {
							width: 60%;
							font-size: 22rpx;
						}

						.tag {
							font-size: 18rpx;
						}
					}

					.data {
						text-align: center;

						.price {
							font-size: 40rpx;
							font-weight: 700;
							margin-top: 16rpx;
						}

						.detail {
							font-size: 20rpx;
							font-weight: 400;

							.inner {
								width: 18rpx;
								height: 18rpx;
							}

							uni-text {
								margin-left: 12rpx;
							}
						}
					}
				}
			}

			.data_nav {
				width: 100%;
				margin: 60rpx 0 0;
				height: 100rpx;
				position: sticky;
				top: calc(var(--status-bar-height) + 280rpx);
				background-color: #0a0b24;
				z-index: 9;
				padding-bottom: 20rpx;

				.nav_item {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					font-weight: 400;
					color: #a4a4af;
					text-align: center;
					line-height: 80rpx;
					position: relative;

					&::after {
						content: "";
						width: 50rpx;
						height: 8rpx;
						background: transparent;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						border-radius: 4rpx;

					}
				}

				.active_data_nav {
					color: #9984dc;

					&::after {
						background: #9984dc;
					}
				}
			}

			.data_list {
				flex-wrap: wrap;
				margin-top: 20rpx;

				.data_item {
					width: calc(50% - 7px);
					background: #12132d;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					overflow: hidden;

					.title {
						width: 100%;
						overflow: hidden;
						color: #dbdbde;
						height: 54rpx;
						background: #282945;
						padding: 0 12rpx;
						line-height: 54rpx;

						.name {
							width: 60%;
							font-size: 30rpx;
						}

						.tag {
							font-size: 24rpx;
						}
					}

					.data {
						text-align: center;
						padding: 20rpx 0;

						.price {
							font-size: 46rpx;
							font-weight: 700;
						}

						.detail {
							font-size: 24rpx;
							font-weight: 400;

							.inner {
								width: 18rpx;
								height: 18rpx;
							}

							uni-text {
								margin-left: 12rpx;
							}
						}
					}
				}
			}

			.no_data {
				margin-top: 70rpx;

				.btn {
					margin: 0 auto;
					font-size: 36rpx;
					font-weight: 400;
					color: #9984dc;
					width: 460rpx;
					height: 88rpx;
					border: 2rpx solid #9984dc;
					border-radius: 44rpx;
				}
			}
		}

		.up {
			background: linear-gradient(0deg, #0a0b24, #073b22);

			.inner {
				background: #53b15f;
				clip-path: polygon(0 100%, 50% 0, 100% 100%);
			}
		}

		.down {
			background: linear-gradient(0deg, #0a0b24, #580d0d);

			.inner {
				background: #f53e3e;
				clip-path: polygon(0 0, 50% 100%, 100% 0);
			}

		}
	}
</style>